<template>
  <view>
    <view
      class="kepu_item"
      v-for="(item, index) in list"
      v-key="index"
      @click="navigateTo('/baby/science/index?id=' + item.id)"
    >
      <view class="title">
        <view class="cont u-line-1">
          {{ item.title }}
        </view>
        <image
          src="@/static/images/close_btn_icon.png"
          mode=""
          class="close_btn_icon"
          @click.stop="negativeFeedback(item.id, index)"
        ></image>
      </view>
      <view class="content u-line-2" v-if="item.text_area">
        {{ item.text_area }}
      </view>
      <view class="images">
        <!-- 只有一張圖 -->
        <view class="images1">
          <image :src="item.thumbnail" mode="widthFix"></image>
        </view>
        <!-- 三张图 -->
        <!-- <view class="pic_item" v-for='(item,index) in item.thumbnail' :key='index'
		        v-show="item.thumbnail&&index < 3">
		        <image :src='item' mode="aspectFill"></image>
		      </view> -->
      </view>
      <view class="userInfo">
        <view class="userInfoBox">
          <view @click.stop="navigateTo('/pages-users/my-page/index?is_self=0&uid=' + item.uid)">
            <u--image :src="item?.avatar" width="52rpx" height="52rpx" radius="50%">
              <template #error class="flex-center-center">
                <view class="ic-error">
                  <u-icon name="photo" size="20"></u-icon>
                </view>
              </template>
            </u--image>
          </view>
          <view>
            <view class="nickname">
              <view class="nicknameName u-line-1">{{ item.nickname }}</view>
              <view class="user_tags">
                <image
                  v-if="item?.app_user_tag == 'official'"
                  src="https://ossresource.miyingbl.com/uploads/20240308/072661a99870e1fcfba1d1df6d8ddd35.png"
                >
                </image>
                <image
                  v-if="item?.app_user_tag == 'doctor'"
                  src="https://ossresource.miyingbl.com/uploads/20240308/dbb99ae497e429ae87f740fb0f64a57f.png"
                >
                </image>
                <text
                  class="u-line-1"
                  v-if="
                    (item?.identity_status_name == '未知' ||
                      item?.identity_status_name == '其他') &&
                    !item?.app_user_tag
                  "
                  >{{ item?.identity_status_name || forMatStatus(item?.identity_status) }}</text
                >
              </view>
            </view>
            <view class="time">{{ item.create_time }}</view>
          </view>
        </view>
        <view class="actions">
          <view
            class="actions_items"
            @click.stop="navigateTo('/baby/science/index?isCom=true&id=' + item.id)"
          >
            <u-icon
              name="https://ossresource.miyingbl.com/uploads/20240312/5bb12dda154fed8e1de21132055d61ef.png"
              size="18"
            ></u-icon>
            <text>评论</text>
          </view>
          <view class="actions_items" @click.stop="zanTab(item)">
            <u-icon name="heart-fill" size="22" v-if="item.like == 1" color="#FFA800"></u-icon>
            <u-icon name="heart" size="22" v-else color="#333333"></u-icon>
            <text>{{ item.zan_number }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})
</script>

<style lang="scss" scoped>
.kepu_item {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  font-family: PingFang SC, PingFang SC;
  margin-bottom: 20rpx;

  .title {
    font-weight: 500;
    font-size: 30rpx;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .cont {
      width: 570rpx;
    }

    .close_btn_icon {
      width: 26rpx;
      height: 32rpx;
      display: block;
    }
  }

  .content {
    font-weight: 500;
    font-size: 28rpx;
    color: #666666;
    margin-top: 10rpx;
  }

  .images {
    margin-top: 15rpx;

    .images1 {
      width: 356rpx;
      max-height: 400rpx;
      overflow: hidden;
      border-radius: 10rpx;

      image {
        width: 356rpx;
        border-radius: 10rpx;
      }
    }
  }

  .userInfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;

    .userInfoBox {
      display: flex;
      align-items: center;

      .nickname {
        padding-left: 10rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #666;
        display: flex;
        align-items: center;

        .nicknameName {
          max-width: 200rpx;
          overflow: hidden;
        }

        .user_tags {
          margin-left: 10rpx;
        }
      }

      .time {
        font-weight: 500;
        font-size: 20rpx;
        color: #9d9d9d;
        padding-left: 10rpx;
      }
    }

    .actions {
      display: flex;

      .actions_items {
        font-weight: 500;
        font-size: 24rpx;
        color: #666666;
        display: flex;
        margin-left: 24rpx;
        align-items: center;

        text {
          padding-left: 10rpx;
        }
      }
    }
  }
}

.user_tags {
  display: flex;

  text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 22rpx;
    color: #969696;
    margin-right: 10rpx;
  }

  image {
    width: 113rpx;
    height: 27rpx;
    display: block;
    margin-right: 10rpx;
  }
}

.kepu_item {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx 30rpx;
  box-sizing: border-box;
  font-family: PingFang SC, PingFang SC;
  margin-bottom: 20rpx;

  .title {
    font-weight: 500;
    font-size: 30rpx;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .cont {
      width: 570rpx;
    }

    .close_btn_icon {
      width: 26rpx;
      height: 32rpx;
      display: block;
    }
  }

  .content {
    font-weight: 500;
    font-size: 28rpx;
    color: #666666;
    margin-top: 10rpx;
  }

  .images {
    margin-top: 15rpx;

    .images1 {
      width: 356rpx;
      max-height: 400rpx;
      overflow: hidden;
      border-radius: 10rpx;

      image {
        width: 356rpx;
        border-radius: 10rpx;
      }
    }
  }

  .userInfo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20rpx;

    .userInfoBox {
      display: flex;
      align-items: center;

      .nickname {
        padding-left: 10rpx;
        font-weight: 500;
        font-size: 24rpx;
        color: #666;
        display: flex;
        align-items: center;

        .nicknameName {
          max-width: 200rpx;
          overflow: hidden;
        }

        .user_tags {
          margin-left: 10rpx;
        }
      }

      .time {
        font-weight: 500;
        font-size: 20rpx;
        color: #9d9d9d;
        padding-left: 10rpx;
      }
    }

    .actions {
      display: flex;

      .actions_items {
        font-weight: 500;
        font-size: 24rpx;
        color: #666666;
        display: flex;
        margin-left: 24rpx;
        align-items: center;

        text {
          padding-left: 10rpx;
        }
      }
    }
  }
}

.kepu {
  padding: 30rpx;

  .kepu_item {
    background: #ffffff;
    border-radius: 12rpx;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    font-family: PingFang SC, PingFang SC;
    margin-bottom: 20rpx;

    .title {
      font-weight: 500;
      font-size: 30rpx;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .cont {
        width: 570rpx;
      }

      .close_btn_icon {
        width: 26rpx;
        height: 32rpx;
        display: block;
      }
    }

    .content {
      font-weight: 500;
      font-size: 28rpx;
      color: #666666;
      margin-top: 10rpx;
    }

    .images {
      margin-top: 15rpx;

      .images1 {
        width: 356rpx;
        max-height: 400rpx;
        overflow: hidden;
        border-radius: 10rpx;

        image {
          width: 356rpx;
          border-radius: 10rpx;
        }
      }
    }

    .userInfo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 20rpx;

      .userInfoBox {
        display: flex;
        align-items: center;

        .nickname {
          padding-left: 10rpx;
          font-weight: 500;
          font-size: 24rpx;
          color: #666;
          display: flex;
          align-items: center;

          .nicknameName {
            max-width: 200rpx;
            overflow: hidden;
          }

          .user_tags {
            margin-left: 10rpx;
          }
        }

        .time {
          font-weight: 500;
          font-size: 20rpx;
          color: #9d9d9d;
          padding-left: 10rpx;
        }
      }

      .actions {
        display: flex;

        .actions_items {
          font-weight: 500;
          font-size: 24rpx;
          color: #666666;
          display: flex;
          margin-left: 24rpx;
          align-items: center;

          text {
            padding-left: 10rpx;
          }
        }
      }
    }
  }
}

.user_tags {
  display: flex;

  text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 22rpx;
    color: #969696;
    margin-right: 10rpx;
  }

  image {
    width: 113rpx;
    height: 27rpx;
    display: block;
    margin-right: 10rpx;
  }
}

.empty_image {
  width: 347rpx;
  height: 190rpx;
  margin: 100rpx auto 50rpx;
  display: block;
}
</style>
